<template>
  <div>
    <header>
      <van-nav-bar title="地址">
        <template #left>
          <van-icon
            name="arrow-left"
            size="26"
            color="black"
            @click="$router.back()"
          />
        </template>
        <template #right>
          <van-icon name="success" size="26" color="black" @click="$router.back()"/>
        </template>
      </van-nav-bar>
    </header>
    <van-index-bar v-for="(item,index) in cityList" :key="index">
      <van-index-anchor index="A" v-text="item.letter"/>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
    </van-index-bar>
  </div>
</template>

<script>
import $axios from "axios";
import Vue from "vue";
import { IndexBar, IndexAnchor } from "vant";

Vue.use(IndexBar);
Vue.use(IndexAnchor);
export default {
  data () {
    return {
      cityList:[]  
    }
  },
  created() {
    $axios.get("/city/sortCity.json").then((res) => {
      console.log(res.data);
      if(res.data.code==200){
        this.cityList = res.data
      }
    });
  },
};
</script>

<style>
.kindheader {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 0.14rem;
  height: 0.44rem;
}
.kindheader .search {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 66%;
  height: 70%;
  background: rgb(243, 243, 243);
  border-radius: 0.4rem;
  color: #999;
  padding: 0 0.2rem;
}
.kindheader .search p {
  font-size: 0.14rem;
}
.kindheader .search i:nth-child(1) {
  font-weight: 900;
  margin-right: 0.04rem;
}
</style>